<template>
  <div>
    <!-- 这里是把mint-ui的组件复制过来的，而不是引用组件 -->
    <!-- 需要把这个h1改成link-->
    <header data-v-e089b420 class="mint-header is-fixed">
      <div class="mint-header-button is-left"></div>
      <router-link
        to="/hahaha"
        tag="h1"
        class="mint-header-title"
        style="cursor:pointer"
      >{{guess.name}}</router-link>
      <div class="mint-header-button is-right"></div>
      <router-link to="/major/search" class="left"></router-link>
      <router-link to="/major/my" class="right"></router-link>
    </header>
  </div>
</template>
<script>
export default {
  data() {
    return {
      guess: JSON.parse(localStorage.getItem('guess'))
    }
  },
  methods: {
    getGuess() {
      //window.console.log(this.guess)
      if (!this.guess) {
        this.$http
          .get('v1/cities/1')
          .then(data => {
            return this.$http.get(
              'v2/pois/' + data.body.latitude + ',' + data.body.longitude
            )
          })
          .then(data => {
            this.guess = data.body
            localStorage.setItem('guess', JSON.stringify(this.guess))
          })
      }
    }
  },
  created() {
    this.getGuess()
  }
}
</script>
<style scoped>
a {
  display: block;
  height: 5vw;
  width: 5vw;
  z-index: 2;
  position: absolute;
}
.mint-header {
  font-size: 5vw;
  height: 13vw;
}
.mint-header-title {
  font-weight: bold;
}
h1 {
  padding: 0;
  margin: 0;
}
.left {
  left: 10px;
  background: url('../../images/search.png') no-repeat;
  background-size: cover;
}
.right {
  right: 5vw;
  background: url('../../images/user-photo.png') no-repeat;
  background-size: cover;
}
.mint-header.is-fixed {
  z-index: 2;
}
</style>